////
/// Components
/// Patterns
////

@import 'utils/shared/layout';
@import 'keyframes';
@import 'props';

:root {
  --pattern-bg-color: white;
}

.Pattern {
  @include visible(false);
  @include position-cover;
}

.Pattern--typeStripes {
  @include stripes-bg;
}

.Pattern--typeHalftone {
  background-image: radial-gradient(currentColor 24%, transparent 25%),
    radial-gradient(currentColor 24%, transparent 25%);
  background-position: $halftone-bg-position-start;
  background-size: $halftone-bg-size $halftone-bg-size;
  animation: halftone get-duration(slow) steps(3) infinite both paused;
  // transition seems to have no affect... maybe bring back the `fade-in` animation?
  // transition: opacity get-duration() get-easing(), visibility get-duration() get-easing();
}

.Pattern--typePlaced {
  background-color: get-color(brand, blue);
}
